<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<style>
.mainEachTv {
	float: left;
	margin: 20px 30px 0px 0px;
	box-shadow: 5px 4px 4px #888888;
	border-radius: 5px;
}

.tvselect {
	box-shadow: 5px 4px 4px #47CDFF;
	border-radius: 5px;
}
</style>
<!-- 按钮 -->
<div class="sortbtn">
	<input type="hidden" id="mainTypeId1" value="${mainTypeId}"> <input
		type="hidden" id="otherTypeId1" value="${otherTypeId}">
	<button type="button" load="date" class="sort btn btn-sm btn-primary">最近更新</button>
	<button type="button" load="time" class="sort btn btn-sm ">最受欢迎</button>
	<button type="button" load="grade" class="sort btn btn-sm">评分最高</button>
</div>

<div id="tvCaDiv"></div>
<!-- 底部分页按钮 -->
<nav style="margin:0 auto;clear:both;width:500px;" >
  <ul class="pagination pagination-lg">
    <li>
      <a  id="pageIndex" load="1" href="javaScript:void(0)" aria-label="Previous" >
        <span aria-hidden="true">首页</span>
      </a>
    </li>
 
    <li >
      <a  id="pageBefore"  href="javaScript:void(0)" aria-label="Previous" >
        <span aria-hidden="true">上一页</span>
      </a>
    </li>   
 
 	 <li class="active">
      <a id="pageThis" href="javaScript:void(0)" aria-label="Previous"  >
        <span aria-hidden="true">2</span>
      </a>
    </li>   
 
    <li >
      <a id="pageAfter"  href="javaScript:void(0)" aria-label="Next">
        <span aria-hidden="true">下一页</span>
      </a>
    </li>
    <li >
      <a id="pageEnd"  href="javaScript:void(0)" aria-label="Next">
        <span aria-hidden="true">尾页</span>
      </a>
    </li>
  </ul>
</nav>
<script>
	

	//生成表格  
	function buildTable(pageNumber) {
		$("#pageno").val(pageNumber);
		var mainTypeId = $("#mainTypeId1").val();
		var otherTypeId = $("#otherTypeId1").val();
		var url = "loadTvCategory";//请求的网址  
		var reqParams = {
			"mainTypeId" : mainTypeId,
			"pagenumber" : pageNumber,
			"otherTypeId" : otherTypeId,
			"sort" : sort
		};//请求数据  
		$(function() {
					$.ajax({
						type : "POST",
						url : url,
						data : reqParams,
						dataType : "json",
						success : function(data) {
							
							$("#tvCaDiv").empty();//清空表格内容  
							//加载图片
							var tvs = data.list;
							var htmlStr1 = "";
							if (tvs.length == 0) {
								htmlStr1 = "<div style='text-align:center;margin:0px auto;'><img src='img/notv.jpg'><br>ヾ(≧O≦)〃嗷~这里没有影片啦</div>";
							} else {
								for (var i = 0; i < tvs.length; i++) {
									if (tvs[i].grades == null) {
										tvs[i].grades = "未评分";
									}
									//对影片详情进行裁剪
									var contentStr = tvs[i].descri;
									contentStr = contentStr
											.substring(0, 10)
											+ "...";
									htmlStr1 += "<div class='mainEachTv'><div><a id='choose_img'   target='_Blank' href='palytvPage?id="
											+ tvs[i].id
											+ "' style='width:180px;height:240px;'>";
									htmlStr1 += "<img  width='180px' height='240px' class='img-rounded' src='virtual_img/"+tvs[i].img_url+"'></a></div>";
									htmlStr1 += "<div><a class='top-link' target='_Blank' href='palytvPage?id="
											+ tvs[i].id
											+ "'>"
											+ tvs[i].name
											+ "</a><span class='pull-right'><font color='red' >"
											+ tvs[i].grades
											+ "</font></span></div>";
									htmlStr1 += "<div><font color='#989898' title='"+tvs[i].descri+"'>"
											+ contentStr
											+ "</font></div></div>";
								}
							}
							$("#tvCaDiv").append(htmlStr1);
							
							//页码处理
							$("#pageBefore").attr("load",data.pageNum-1);
							$("#pageAfter").attr("load",data.pageNum+1);
							$("#pageEnd").attr("load",data.pages);
							$("#pageThis").attr("load",data.pageNum);
							$("#pageThis").children().eq(0).text(data.pageNum);
						},
					error:function(data){
						console.log(data);
					}
				});
		});
	}
	
	
	//为页码绑定事件
	$("#pageIndex,#pageBefore,#pageAfter,#pageEnd").on("click",function(){
		var start=$(this).attr("load");
		buildTable(start);
	});
</script>
<script>
	var sort;
	$(function() {
		loadTv("date");
	});
	function loadTv(str) {
		sort = str;
		buildTable("0");
			
	}
	$(".sort").on("click", function() {
		initBtn();
		$("#tvCaDiv").empty();
		$(this).addClass("btn-primary");
		sort = $(this).attr("load");
		buildTable("0");
	});

	//初始化按钮点击
	function initBtn() {
		$(".sort").each(function() {
			$(this).removeClass("btn-primary");
		});
	}

	$("body").on("mouseover", ".mainEachTv", function() {
		$(this).addClass("tvselect");
	});

	$("body").on("mouseout", ".mainEachTv", function() {
		$(this).removeClass("tvselect");
	});
</script>
